<template>
    <HeaderBar :title="$t('mine.star.title')" />
    <view class="light-container vip-container">
        <view class="membership-levels">
            <view class="level-item" v-for="(item, index) in levels" :key="index">
                <view class="icon">
                    <image :src="`/static/icon/vip${item.level - 1}.png`" class="medal-icon" />
                </view>
                <view class="content">
                    <view class="level-title">
                        <text v-if="index === 0">{{$t('mine.star.free')}}</text>
                        <text v-else>{{$t('mine.star.vip')}} {{ index }}</text>
                        <text class="current-tag" v-if="userInfo.level === item.level">{{$t('mine.star.current')}}</text>
                    </view>
                    <view class="level-details">
                        <view class="detail-item">
                            <text>●</text>
                            {{$t('mine.star.required')}} {{ formatAmount(item.price) }}
                        </view>
                        <view class="detail-item">
                            <text>●</text>
                            {{$t('mine.star.commission')}} {{ item.rebateRatio * 100 }} % | {{ item.orderLimit }} {{$t('mine.star.order')}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import HeaderBar from '@/components/HeaderBar/index.vue';
import { onLoad } from '@dcloudio/uni-app';
import { getStorage, formatAmount } from '@/utils/common';
import { getMemberLevel } from '@/api/mine';
const levels = ref<any>([]);
const userInfo = ref<any>(getStorage('user') || {});

onLoad(() => {
    getLoad();
});

//初始化加载
const getLoad = async () => {
    const res = await getMemberLevel();
    if (res.code !== 200) {
        return;
    }
    levels.value = res.data || [];
};
</script>

<style lang="scss" scoped>
.vip-container {
    padding: 120rpx 0 0;

    .membership-levels {
        margin: 0 30rpx;
    }

    .level-item {
        margin-bottom: 30rpx;
        border-radius: 20rpx;
        padding: 30rpx;
        color: #fff;
        display: flex;
        align-items: center;
        background: #5a86df;

        .icon {
            width: 120rpx;

            .medal-icon {
                width: 100rpx;
                height: 100rpx;
                margin-right: 12rpx;
            }
        }

        /* 等级标题样式 */
        .level-title {
            font-size: 40rpx;
            font-weight: bold;
            display: flex;
            align-items: center;
            color: #ffb225;
        }

        /* 当前等级标识样式 */
        .current-tag {
            margin-left: 15rpx;
            font-size: 24rpx;
            border: solid 1rpx #ffb225;
            color: #ffb225;
            border-radius: 10rpx;
            padding: 6rpx 15rpx;
        }

        /* 等级详情容器，设置行高 */
        .level-details {
            color: #fff;
            font-size: 22rpx;
            margin-top: 5rpx;
            line-height: 38rpx;

            text {
                font-size: 40rpx;
            }
        }

        /* 单个详情项样式 */
        .detail-item {
            display: block;
            font-size: 26rpx;
        }
    }
}
</style>
